<template>

	<body>
		<div class="loan_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>贷款申请</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div>
			<swiper :list="imgList" :show-dots="false" loop auto :aspect-ratio="0.3" dots-position="center" dots-class="custom-bottom"></swiper>
		</div>
		<!--表单-->
		<!-- <group>
			<x-input title="姓名" v-model="params.userName" readonly placeholder="请输入真实姓名"></x-input>
			<x-input title="手机号" v-model="params.mobile" readonly placeholder="请输入手机号"></x-input>
			<selector title="贷款金额" v-model="params.loansInterval" :options="listM" placeholder="请选择金额"></selector>
			<selector title="贷款类型" placeholder="请选择类型" v-model="params.loansType" :options="listT"></selector>
			<selector title="贷款期限" placeholder="请选择期限" v-model="params.loansTime" :options="listO"></selector>
			<selector title="职业" placeholder="请选择职业" v-model="params.job" :options="listW"></selector>
		</group> -->
		<div class="form">
			<ul>
				<li>
					<p>姓名</p>
				</li>
				<li><input v-model="params.userName" type="text" placeholder="请输入真实姓名" readonly/></li>
				<li></li>
			</ul>
			<ul>
				<li>
					<p>手机号</p>
				</li>
				<li><input v-model="params.mobile" type="tel" placeholder="请输入手机号码" readonly/></li>
				<li></li>
			</ul>
			<ul>
				<li>
					<p>贷款金额</p>
				</li>
				<li></li>
				<li style="display: flex;">
					<selector placeholder="请选择金额" v-model="params.loansInterval" :options="listM"></selector>
				</li>
			</ul>
			<ul>
				<li>
					<p>贷款类型</p>
				</li>
				<li></li>
				<li style="display: flex;">
					<selector placeholder="请选择类型" v-model="params.loansType" :options="listT"></selector>
				</li>
			</ul>
			<ul>
				<li>
					<p>贷款期限</p>
				</li>
				<li></li>
				<li style="display: flex;">
					<selector placeholder="请选择期限" v-model="params.loansTime" :options="listO"></selector>
				</li>
			</ul>
			<ul>
				<li>
					<p>职业</p>
				</li>
				<li></li>
				<li style="display: flex;">
					<selector placeholder="请选择职业" v-model="params.job" :options="listW"></selector>
				</li>
			</ul>
			<ul>
				<li>
					<p>贷款原因</p>
				</li>
				<li></li>
				<li style="display: flex;">
					<selector placeholder="请选择原因" v-model="params.loansCause" :options="listR"></selector>
				</li>
			</ul>
			<ul>
				<li>
					<p>指定对接人编码</p>
				</li>
				<li><input v-model="params.bizCode" type="text" placeholder="有指定对接人编码则输入" /></li>
				<li></li>
			</ul>
		</div>
		<!--提交按钮-->
		<div class="btn">
			<input @click="apply" type="button" value="立即申请" class="col_dr2" />
		</div>
		<div class="interval">

		</div>
	</body>
</template>

<script>
import { Selector, XInput, Group } from 'vux'
export default {
	components: {
		Selector,
		XInput,
		Group
	},
	data() {
		return {
			params: {
				loansInfoId: this.$route.params.id,
				loansInterval: '',
				loansType: '',
				loansTime: '',
				job: '',
				loansCause: '',
				bizCode: this.$route.query.jobNum
			},
			paramsRule: {
				userName: '请先进行实名认证',
				loansInterval: '金额不能为空',
				loansType: '类型不能为空',
				loansTime: '期限不能为空',
				job: '职业不能为空',
				loansCause: '原因不能为空'
			},

			listM: [{ key: '其它', value: '其它' }, { key: '0-50万', value: '0-50万' }, { key: '50-100万', value: '50-100万' }, { key: '100-200万', value: '100-200万' }, { key: '200万以上', value: '200万以上' }],
			listT: [{ key: '信用贷', value: '信用贷' }, { key: '抵押贷', value: '抵押贷' }, { key: '私借', value: '私借' }],
			listO: [{ key: '1个月', value: '1个月' }, { key: '2个月', value: '2个月' }, { key: '3个月', value: '3个月' }, { key: '4个月', value: '4个月' }, { key: '5个月', value: '5个月' }, { key: '6个月', value: '6个月' }, { key: '1年', value: '1年' }, { key: '2年', value: '2年' }, { key: '3年', value: '3年' }, { key: '5年', value: '5年' }],
			listR: [{ key: '个人消费', value: '个人消费' }, { key: '资金周转', value: '资金周转' }, { key: '企业运营', value: '企业运营' }, { key: '其他', value: '其他' }],
			listW: [{ key: '工薪族', value: '工薪族' }, { key: '个体户', value: '个体户' }, { key: '企业主', value: '企业主' }, { key: '其他', value: '其他' }],

			imgList: []
		}
	},
	created() {
		this.query()
		this.queryImg()
	},
	methods: {
		apply() {
			for(let prop in this.params) {
				const val = this.params[prop]
				const msg = this.paramsRule[prop]
				console.log(this.params)
				if(!val && msg) {
					return this.$vux.toast.show({ type: 'cancel', text: msg })
				}
			}
			this.$http.post('/app/loan/save', this.params).then(json => {
				const { code } = json
				if (code === 0) {
					this.$router.replace('/notification')
				}
			})
		},
		query() {
			const vm = this
			this.$http.get('/app/member/userInfo').then(json => {
				const { code, user } = json
				if(code === 0) {
					if(!user.memberName) {
						this.$vux.confirm.show({
							title: '提示',
							content: '您尚未实名认证，请先进行认证',
							onConfirm() {
								vm.$router.push("/authentication")
							}
						})
					}
					this.$set(this.params, 'userName', user.memberName)
					this.$set(this.params, 'mobile', user.mobile)
				}
			})
		},

		queryImg() {
			this.$http.get('/app/index/carousel', {
				params: { page: 'loanapplication' }
			}).then(json => {
				const { code, carousel } = json
				if (code === 0) {
					carousel.forEach(n => {
						this.imgList.push({
							url: n.url,
							img: n.imgPath
						})
					})
				}
			})
		}
	}
}
</script>

<style>
.form .weui-cell_select .weui-select {
  height: 0.5rem;
  line-height: 0.5rem;
  width: 2rem;
  font-size: 0.26rem;
}
</style>